<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求:
				设定课程的成绩:score根据课程的成绩进行评级
				注意事项:v-if/v-else位置应该连续
			 -->
			 <h3 v-if="score>=90">优秀</h3>
			 <h3 v-else-if="score>=80 && score<90">良好</h3>
			 <h3 v-else-if="score>=70 && score<80">中等</h3>
			 <h3 v-else-if="score>=60 && score<70">及格</h3>
			 <h3 v-else>不及格</h3>
			 <!-- v-show指令 h3标签动态的展现 跟一个布尔类型的值
				style="display:none" 如果数据频繁的切换 效率更高
			  -->
			  <h3 v-show="isShow">展现一个变化的数据</h3>
			  <!-- 通过按钮切换状态 -->
			 <button @click="isShow = !isShow">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					score:100,
					isShow:true
				}
			})
		</script>
	</body>
</html>
